<template>
  <view class="content">
    <view class="page-head">
      <uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
      <text class="white-font gap-top">黄金矿工OL</text>
    </view>

    <view class="tips-box">
      <view class="tips-bg white-content">
        <view class="tips-inner">当前扭蛋机需消耗Z元素{{wallet}}/次</view>
      </view>
    </view>

    <!--当前扭蛋机需消耗Z元素10.00/次-->

    <view class="main-photo">
      <van-image width="100%" height="700rpx" :src="image"></van-image>
    </view>


    <view class="picker-meta-box">
      <view class="picker-meta">
        <van-image width="2rem" height="2rem" src="/static/icons/z-meta/z-picker-icon.png"></van-image>
        <text class="white-content meta-text">当前Z元素数量：10000</text>
      </view>

      <view class="picker-btn-box">
        <view class="picker-btn">
          <text class="white-content">扭1次</text>
        </view>
        <view class="picker-btn">
          <text class="white-content">扭1次</text>
        </view>
        <view class="picker-btn">
          <text class="white-content">扭1次</text>
        </view>
      </view>
    </view>

    <view class="pd">
      <section-title title="本机奖品池" class="gap-top" />
      <view class="products-list">
        <template v-for="(e, index) in new Array(8)" :key="index">
          <product-item
                  title="一番赏 龙珠 基纽雪未来的语言的华语"
                  pic="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/product-example.png"
                  price="68.00"
                  badge=""
                  v-on:click="gotoDetail"
          />
        </template>
      </view>
    </view>

  </view>
</template>

<script>
import SectionTitle from '@/wxcomponents/section-title'
import productItem from '@/wxcomponents/product-item'

export default {
  name: "z-picker",
  data() {
    return {
      image: 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/z-cat.png',
      wallet: '10.00',
    }
  },
  components: {
    SectionTitle,
    productItem
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: '/pages/z-meta/index'
      })
    }
  }
}
</script>

<style lang="scss">
@import 'src/static/scss/common';

page {
  background-color: #0A050B;
}

.content {
  padding: 0;
}

.pd {
  padding: 40rpx;
}

.page-head {
  display: flex;
  gap: 10px;
  width: 100vw;
  line-height: 88px;
}

.main-photo {
  text-align: center;
  margin-top: 26rpx;
}


.tips-box {
  display: flex;
  justify-content: center;
  margin-top: 36rpx;
}

.tips-bg {
  width: 520rpx;
  height: 102rpx;
  background: url('/static/icons/z-meta/tips-box.png') no-repeat center;

  display: flex;
  justify-content: center;
  align-items: center;
  .tips-inner {
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 0 24rpx;
    background: linear-gradient(135deg, rgba(225, 116, 237, 0.5) 0%, rgba(47, 118, 236, 0.5) 100%);
  }
}

.gap-top {
  margin-top: 26px;
}

.picker-meta-box {
  margin-top: -190rpx;

  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
}

.picker-meta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .meta-text {
    padding-left: 20rpx;
  }
}

.picker-btn-box {
  margin-top: 30rpx;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  z-index: 10;

  .picker-btn {
    width: 150rpx;
    height: 150rpx;
    font-size: 36rpx;
    font-weight: bold;

    display: flex;
    justify-content: center;
    align-items: center;

    background: url('/static/icons/z-meta/z-picker-btn.png') no-repeat;
    background-size: contain;
  }
}


</style>
